<template>
  <a-card>
    <a-form @submit.prevent="onSubmit" :form="form">
      <a-form-item v-bind="formItemLayout" label="手机号">
        <a-input v-decorator="['phone',{rules: [{ required: true, message: '请输入账户名' }], initialValue: '1234'}]" size="large" placeholder="请输入账号">
          <a-icon slot="prefix" type="user" />
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="密码">
        <a-input v-decorator="['password',{rules: [{ required: true, message: '请输入密码' }]}]" size="large" placeholder="请输入密码" type="password">
          <a-icon slot="prefix" type="lock" />
        </a-input>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="头像">
        <upload-qn v-decorator="['images', {rules: [{required: true, message: '请上传'}], initialValue: [{url: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'}]}]" />
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-button size="large" htmlType="submit" type="primary">登录</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      }
    }
  },
  methods: {
    onSubmit() {
      this.form.validateFields((err, values) => {
        if (err) return
        console.log(values)
      })
    }
  }
}
</script>

<style>
</style>
